<div id='GenHome' class="OneContainer">
	<div class="row">
		<div class="col-md-4">
			<div class="Panel PanelBlack">
				<div class="PanelTitle">用户信息</div>
				<div class="PanelBody">
					<div class="PanelItem">
						<span class="glyphicon glyphicon-user" aria-hidden="true"></span>
						用户名: {{ username }}
					</div>
					<div class="PanelItem">
						<span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
						创建时间: {{ createDate }}
					</div>
					<div class="PanelItem">
						<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
						最后上线: {{ lastDate }}
					</div>
				</div>
			</div>
			<div class="Panel PanelBlue">
				<div class="PanelTitle">用户 {{ username }} 的服务器</div>
				<div class="PanelBody">
					<div class="row">
						<div class="col-sm-6">
							<div class="LogV">{{ AllServerLen }} 个</div>
							<div class="LogK">服务器总数 </div>
						</div>
						<div class="col-sm-6">
							<div class="LogV">{{ OnlineLen }} 个</div>
							<div class="LogK">正在运行的服务器</div>
						</div>
					</div>
				</div>
			</div>
			<div class="Panel PanelGreen">
				<div class="PanelTitle">用户 {{ username }}，欢迎使用</div>
				<div class="PanelBody">
					<div class="row">
						<div class="col-sm-6">
							<div class="PanelItem text-center" v-on:click="toRePassword()">
								<span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
								修改密码
							</div>
						</div>
						<div class="col-sm-6">
							<div class="PanelItem text-center">
								<span class="glyphicon glyphicon-book" aria-hidden="true"></span>
								<!-- 您可以在这里附上您的链接，修改 href 属性即可 -->
								<a href="javascript:alert('您的提供商未提供使用说明')">使用说明</a>
							</div>
						</div>
					</div>

				</div>
			</div>
			<div class="Panel PanelBlack">
				<div class="PanelTitle">用户 API 密匙</div>
				<div class="PanelBody">
					<div class="PanelItem text-center" v-on:click="toApiKey()">
						<span class="glyphicon glyphicon-th-large" aria-hidden="true"></span>
						我的 API 密匙
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-8">
			<div class="Panel PanelBlack">
				<div class="PanelTitle">用户 {{ username }} 持有的服务器</div>
				<div class="PanelBody">
					<div class="row">
						<div class="col-md-12">
							<div class="PanelItem" v-for="item of userServerList">
								<div class="row">
									<div class="col-md-7">
										<div class="PanelItemInfo">
											<h4>
												<p>{{item.serverName}}</p>

												<p v-text="'文件名:' + item.jarName || '未设置'"></p>
											</h4> 状态:
											<span v-if="item.run" class="color-green"> 正在运行 </span>
											<span v-else="item.run" class="color-red"> 关闭 </span>
											<!--<br>创建时间 ：<span v-text="item.createDate"></span>-->
											<br>最后启动：
											<span v-text="item.lastDate"></span>
											<br>到期:
											<span v-text="item.timeLimitDate"></span>
										</div>
									</div>
									<div class="col-md-5 NextCol">
										<div class="GenhomeButton">
											<button class="btn btn-info " v-on:click="toConsole(item.serverName)">
												控制 | 管理
											</button>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>



<!--js-->
<script>
	MI.rListener('onload', function () {
		// 定义页面地址
		TOOLS.definePage('template/gen_home', 'genuser/home', '');

		// MCSERVER.colmSet(false);
		VIEW_MODEL.newVue('GenHome', {
			el: '#GenHome',
			methods: {
				toConsole: function (serverName) {
					MCSERVER.listenServername = serverName;
					RES.redirectPage('./template/component/console.html', 'server/console', serverName);
				},
				toRePassword: function () {
					RES.redirectPage('./template/component/gen_repassword.html');
				},
				toApiKey: function () {
					// 弹出用户密匙设置窗口
					PAGE.username = this.username;
					TOOLS.popWind({
						style: {
							maxWidth: "600px",
							top: "24%"
						},
						title: "用户 " + PAGE.username + " 的密匙设置",
						template: "template/dialog/apikey.html"
					});
				}
			}
		});
	})

	MI.rListener('onend', function () { })
</script>